<template>
  <div>
    <el-card shadow="never" class="mt-16px">
      <template #header>
        <span>{{ infoOptions.data?.name || '--' }}</span>
      </template>
      <el-descriptions :column="infoOptions.column">
        <div v-for="(item, index) in infoOptions.columns" :key="index">
          <el-descriptions-item :label="item.label">{{
            infoOptions.data[item.key] || '--'
          }}</el-descriptions-item>
        </div>
      </el-descriptions>
      <el-descriptions :column="filedOptions.column" class="mt-16px">
        <div v-for="(item, index) in filedOptions.columns" :key="index">
          <el-descriptions-item
            label-class-name="font-size-16px"
            class-name="font-size-16px"
            :label="item.label"
            >{{ filedOptions.data[item.key] || '0' }}</el-descriptions-item
          >
        </div>
      </el-descriptions>
    </el-card>
    <el-card shadow="never" class="mt-16px">
      <el-form label-width="100px" ref="formRef" :model="searchValue">
        <el-row>
          <el-col :span="6">
            <el-form-item label="文件名称" prop="fileName">
              <ns-input v-model="searchValue.fileName" clearable placeholder="请输入文件名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="文件类型" prop="fileType">
              <ns-input v-model="searchValue.fileType" clearable placeholder="请输入文件类型" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否已分级" prop="isLevel">
              <el-select v-model="searchValue.isLevel" clearable placeholder="请选择是否已分级">
                <el-option label="已分级" :value="true" key="1" />
                <el-option label="未分级" :value="false" key="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="text-right">
            <el-button @click="searchReset" plain>重置</el-button>
            <el-button @click="search" plain>搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-divider />
      <el-button type="primary" :disabled="ids.length == 0" @click="recheckList('1')"
        >复核通过</el-button
      >
      <el-button plain :disabled="ids.length == 0" @click="recheckList('0')">复核不通过</el-button>
      <AsyncTable
        class="mt-12px"
        ref="tableRef"
        :fetchData="fetchData"
        @selection-change="changeTable"
        v-bind="tableOptions"
      />
    </el-card>
  </div>
</template>

<script setup lang="tsx">
import {
  getDataSourceDetail,
  assetPageByLevelCount,
  getDataBaseList,
  assetMessageRechecks
} from '@/api/assetList'
import { renderFinger, recheckStatusRender } from '@/utils/commonRender'
import { recheckStatusMap } from '@/utils/dict'

const { proxy } = getCurrentInstance() as any
const route = useRoute()
const assetId = ref<string>(route.query.id as string)

const formRef = ref()
const tableRef = ref()
const infoOptions = reactive({
  column: 5,
  columns: [
    { label: '归属机构：', key: 'deptName' },
    { label: '归属系统：', key: 'sysName' },
    { label: '数据标准：', key: 'templateName' },
    // { label: '分类分级方式：', key: 'classificationWay' },
    { label: '启动时间：', key: 'startTime' },
    { label: '完成时间：', key: 'completeTime' }
  ],
  data: {}
})
const filedOptions = reactive({
  column: 5,
  columns: [
    { label: '总文件数：', key: 'totalCount' },
    { label: '已分级数：', key: 'level' },
    { label: '未分级数：', key: 'unLevel' }
  ],
  data: {}
})
const ids = ref<string[]>([])

const searchValue = ref({
  fileName: '',
  fileType: '',
  classification: '',
  level: '',
  importance: '',
  isLevel: ''
})

// 搜索重置
const searchReset = () => {
  formRef.value.resetFields()
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}
// 搜索
const search = () => {
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}

// 表格数据获取
const fetchData = async ({ page, pageSize }) => {
  const { data, count } = await getDataBaseList({
    page,
    pageSize,
    ...searchValue.value,
    parentId: assetId.value
  })
  return { data, count }
}
const changeTable = (val) => {
  ids.value = []
  val.map((item) => {
    ids.value.push(item.id)
  })
}

const tableOptions = reactive({
  columns: [
    {
      type: 'selection'
    },
    { label: '文件名称', prop: 'fileName' },
    { label: '文件类型', prop: 'fileType' },
    { label: '文件大小', prop: 'fileSize' },
    { label: '文件指纹', width: '150px', render: renderFinger },
    { label: '分级', prop: 'level' },
    {
      label: '复核状态',
      render: recheckStatusRender
    },
    {
      label: '操作',
      render: ({ row }) => {
        return (
          <>
            <el-button link type="primary" onClick={() => recheck(row)}>
              复核
            </el-button>
          </>
        )
      }
    }
  ],
  data: []
})

// 分级分类（行）
const recheck = (row) => {
  proxy?.$Drawer({
    params: {
      ...row,
      callBack: () => {
        tableRef.value.resetPage()
        tableRef.value.fetchData()
      }
    },
    title: `复核`,
    size: '40%',
    component: import('../databaseRecheckPage/components/recheck.vue')
  })
}

const recheckList = async (status) => {
  proxy?.$modal
    .confirm(`确定要将所选资产复核${recheckStatusMap.get(status)}吗？`)
    .then(async () => {
      const data = await assetMessageRechecks({
        ids: ids.value,
        recheckStatus: status
      })
      console.log('data', data)
      if (data) {
        tableRef.value.fetchData()
        ElMessage.success('提交成功')
      }
    })
    .catch(() => {})
}

const getDetail = async () => {
  const res = await getDataSourceDetail({ id: assetId.value })
  infoOptions.data = res.data
  const data = await assetPageByLevelCount({ parentId: assetId.value, ...searchValue.value })
  console.log('data', data)
  filedOptions.data = data
}
onMounted(async () => {
  getDetail()
})
</script>
